<script setup>
import { ref,onMounted } from 'vue'
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'
// 引入柱状图图表，图表后缀都为 Chart
import { LineChart, FunnelChart } from 'echarts/charts'
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components'
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers'

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LineChart,
  FunnelChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
])
const activeName = ref('first')
const lineChart = ref(null)
const lineInstance = ref(null)
const funnelChart = ref(null)
const funnelInstance = ref(null)

onMounted(() => {
  lineInstance.value = echarts.init(lineChart.value)
  lineInstance.value.setOption({
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: [
      {
        type: 'value'
      },
      {
        type: 'value'
      }
    ],
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
      }
    ]
  })
  //
  funnelInstance.value = echarts.init(funnelChart.value)
  funnelInstance.value.setOption({
    title: {
      text: 'Funnel'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c}%'
    },
    toolbox: {
      feature: {
        dataView: { readOnly: false },
        restore: {},
        saveAsImage: {}
      }
    },
    legend: {
      data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
    },
    series: [
      {
        name: 'Funnel',
        type: 'funnel',
        left: '10%',
        top: 60,
        bottom: 60,
        width: '80%',
        min: 0,
        max: 100,
        minSize: '0%',
        maxSize: '100%',
        sort: 'descending',
        gap: 2,
        label: {
          show: true,
          position: 'inside'
        },
        labelLine: {
          length: 10,
          lineStyle: {
            width: 1,
            type: 'solid'
          }
        },
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1
        },
        emphasis: {
          label: {
            fontSize: 20
          }
        },
        data: [
          { value: 60, name: 'Visit' },
          { value: 40, name: 'Inquiry' },
          { value: 20, name: 'Order' },
          { value: 80, name: 'Click' },
          { value: 100, name: 'Show' }
        ]
      }
    ]
  })
})

const dateValue = ref(null)
console.log(dateValue.value)
// 分页
const form = ref({
  pageNum: '1',
  pageSize: '10'
})
const pageChange = (newPage) => {
  form.value.pageNum = newPage
}
const total = ref(200)
//下拉tree选择
const data = [
  {
    value: '1',
    label: '传智教育',
    children: [
      {
        value: '1-1',
        label: '北京总公司',
        children: [
          {
            value: '1-1-1',
            label: '研发部门',
            children: [
              {
                value: '1-1-1-1',
                label: '研发一部'
              },
              {
                value: '1-1-1-2',
                label: '研发二部'
              },
              {
                value: '1-1-1-3',
                label: '测试部门'
              },
              {
                value: '1-1-1-4',
                label: '运维部门'
              }
            ]
          },
          {
            value: '1-1-2',
            label: '商务部',
            children: [
              {
                value: '1-1-2-1',
                label: '市场部'
              },
              {
                value: '1-1-2-2',
                label: '商机部'
              }
            ]
          },
          {
            value:'1-1-3',
            label:'财务部门'
          }
        ]
      }
    ]
  }
]
</script>
<template>
  <div class="container">
    <div class="header">
      <div class="firstbox tabBox">
        <div>
          <el-date-picker
            v-model="dateValue"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="large"
            :default-value="[new Date(2023, 3, 1), new Date(2023, 6, 19)]"
          />
        </div>
        <!-- 按钮组 -->
      </div>
      <div style="height: 500px;">
          <el-tabs v-model="activeName" type="card">
            <el-tab-pane name="first" label="新增线索量">
              <div ref="lineChart" style="width: 1000px; height: 500px"></div>
            </el-tab-pane>
            <el-tab-pane name="second" label="线索转化率">
              <div ref="funnelChart" style="width: 1000px; height: 500px"></div>
            </el-tab-pane>
          </el-tabs>
        </div>
      <!-- // -->
      <h3 class="titleBox">线索统计报表</h3>
      <!-- /// -->
      <div class="searchBox">
        <el-form :inline="true" label-position="top">
          <el-form-item label="线索编号">
            <el-input placeholder="请输入线索编号" size="large" style="width: 280px"></el-input>
          </el-form-item>
          <el-form-item label="归属人">
            <el-input placeholder="请输入归属人" size="large" style="width: 280px"></el-input>
          </el-form-item>
          <el-form-item label="所属部门">
            <el-tree-select
            placeholder="请选择归属部门"
            size="large"
            style="width: 280px"
            v-model="value"
            :data="data"
            check-strictly
            :render-after-expand="false"
          />
          </el-form-item>
        </el-form>
        <div style="margin-top: 30px">
          <el-button type="success" round size="large" style="width: 94px">搜索</el-button>
          <el-button type="info" round size="large" style="width: 94px">重置</el-button>
        </div>
      </div>
      <!-- //// -->
      <div class="tableBox">
        <el-table :data="tableData" style="width: 100%" stripe>
          <el-table-column label="线索编号" />
          <el-table-column label="手机号" />
          <el-table-column label="归属人部门" />
          <el-table-column label="归属人" />
          <el-table-column label="渠道来源" />
          <el-table-column label="活动详情" />
          <el-table-column label="线索状态" />
          <el-table-column label="创建时间" sortable></el-table-column>
        </el-table>
        <el-row type="flex" justify="center">
          <el-pagination
            v-model:current-page="form.pageNum"
            v-model:page-size="form.pageSize"
            :page-sizes="[10, 20, 30, 50]"
            :small="small"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @current-change="pageChange"
            @size-change="pageSizeChange"
          />
        </el-row>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.container {
  background-color: #fff;
  .tabBox {
    display: flex;
    justify-content: space-between;
    padding: 14px 20px;
  }
  .titleBox {
    height: 83px;
    line-height: 83px;
    padding-left: 21px;
    background-color: #f9f9f9;
  }
  .searchBox {
    display: flex;
    justify-content: space-between;
    padding: 10px 56px 40px 45px;
  }
  :deep(.el-input__wrapper) {
    border-radius: 10px;
    background-color: #f9f9f9;
  }
}
</style>
